<template>
  <!--<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>-->
  <!--<div id="allmap":style="{width: '100%', height: mapHeight + 'px'}"></div>-->
  <div id="maproot">
    <div id="map-container">
      <map-core></map-core>
    </div>
    <div id="map-control" class="container">
      <div class="row">
        <tool-menu
          menuName="checkBus"
          iConClsN="fa fa-bus fa-lg"
          divClsN="bg-light text-primary"
          divClsY="bg-primary text-light"
          divClsD="mtool col border-right p-2 rounded-left"
          :divStat="isShowBusRoutes"
          :isShow="isShowTool"
          @menuClick="menuClick"
        ></tool-menu>
        <tool-menu
          menuName="editMap"
          iConClsN="fa fa-pencil-square-o fa-lg"
          divClsN="bg-light text-primary"
          divClsY="bg-primary text-light"
          divClsD="mtool col border-right p-2"
          :divStat="isShowEditMap"
          :isShow="isShowTool"
          @menuClick="menuClick"
        ></tool-menu>
        <tool-menu
          menuName="searchRoutes"
          iConClsN="fa fa-search fa-lg"
          divClsN="bg-light text-primary"
          divClsY="bg-primary text-light"
          divClsD="mtool col border-right p-2"
          :divStat="isShowSearchRoutes"
          :isShow="isShowTool"
          @menuClick="menuClick"
        ></tool-menu>
        <!-- <div :class="[isShowTool?'rounded-right':'rounded mleft','mtool col-2 bg-light p-2 text-primary']" @click="changeToolStatus">
          <i :class="[isShowTool?'fa-angle-double-right':'fa-angle-double-left', 'fa', 'fa-lg']"></i>
        </div> -->
        <tool-menu
          menuName="toolControl"
          iConClsN="fa-angle-double-left"
          iConClsY="fa-angle-double-right"
          iConClsD="fa fa-lg"
          :iConStat="isShowTool"
          divClsN="rounded mleft"
          divClsY="rounded-right"
          divClsD="mtool col-2 bg-light p-2 text-primary"
          :divStat="isShowTool"
          :isShow="true"
          @menuClick="menuClick"
        ></tool-menu>
      </div>
    </div>
    <div id="map-control-panel">
      <bus-routes v-if="isShowBusRoutes" ref="busroutes"></bus-routes>
      <edit-map v-if="isShowEditMap" ref="editmap"></edit-map>
      <search-routes v-if="isShowSearchRoutes" ref="searchroutes"></search-routes>
    </div>
    <div id="clear-panel" v-if="isCloseTool" @click="clearPanel">
        <div class="mclose col p-2 text-primary">
          <i class="fa fa-close fa-lg"></i>
        </div>
    </div>
  </div>
</template>
<script>
import MapCore from '@/components/map/map-core'
import BusRoutes from '@/components/map/bus-routes'
import ToolMenu from '@/components/map/tool-menu'
import EditMap from '@/components/map/edit-map'
import SearchRoutes from '@/components/map/search-routes'
export default {
  name: 'MapView',
  data () {
    return {
      isShowTool: true,
      isShowBusRoutes: false,
      isShowEditMap: false,
      isShowSearchRoutes: false
    }
  },
  computed: {
    isCloseTool () {
      // 任意一个panel可见即显示close工具
      return this.isShowBusRoutes || this.isShowEditMap || this.isShowSearchRoutes
    }
  },
  methods: {
    /**
     * 收起/展开菜单
     */
    changeToolStatus () {
      this.isShowTool = !this.isShowTool
      this.clearPanel()
    },
    /**
     * 切换查看线路菜单状态
     */
    changeBusRoutes () {
      let tstate = !this.isShowBusRoutes
      this.clearPanel()
      this.isShowBusRoutes = tstate
    },
    /**
     * 切换编辑菜单状态
     */
    changeEditMap () {
      let tstate = !this.isShowEditMap
      this.clearPanel()
      this.isShowEditMap = tstate
    },
    /**
     * 切换搜索菜单状态
     */
    changeSearchRoutes () {
      let tstate = !this.isShowSearchRoutes
      this.clearPanel()
      this.isShowSearchRoutes = tstate
    },
    /**
     * 关闭所有工具区域
     */
    clearPanel () {
      this.isShowBusRoutes = false
      this.isShowEditMap = false
      this.isShowSearchRoutes = false
      // 其他Panel也在此设置不可见
    },
    /**
     * 菜单点击事件， 根据控件名绑定对应事件
     */
    menuClick (type) {
      switch (type) {
        case 'checkBus':
          this.changeBusRoutes()
          break
        case 'editMap':
          this.changeEditMap()
          break
        case 'searchRoutes':
          this.changeSearchRoutes()
          break
        case 'toolControl':
          this.changeToolStatus()
          break
      }
    }
  },
  components: {
    MapCore,
    BusRoutes,
    ToolMenu,
    EditMap,
    SearchRoutes
  }
}
</script>

<!--Add"scoped" attribute to limit CSS to this component only -->
<style scoped>
#maproot {
  color:white;
  width: 100%;
  height: 100%;
  position: relative;
}
#map-container {
  width: 100%;
  height: 100%;
}
#map-control {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 260px;
}
.mleft {
  margin-left: 217px;
}
.mtool:hover {
  cursor: pointer;
  background-color: #007bff !important;
  color: white !important;
}
#map-control-panel {
  position: absolute;
  right: 10px;
  top: 51px;
  /* height: 400px; */
  width: 260px;
  color: rgb(50, 54, 57);
}
#clear-panel {
  position: absolute;
  right: 15px;
  top: 56px;
}
.mclose:hover {
  cursor: pointer;
}
</style>
